<template>
  <div class="can-closed-tips">
    <div class="tips-content">
      <slot name="icon">
        <Icon
          type="md-information-circle"
          color="#367EE8"
          size="18"
          style="verify: middle"
          class="middle"
        />
      </slot><span class="middle">&nbsp;</span><span class="middle">
        <slot>提醒：您的操作不规范哦。</slot>
      </span>
    </div>
    <div
      class="close-btn"
      @click="$emit('close')"
    >
      <Icon
        type="md-close"
        size="18"
      />
    </div>
  </div>
</template>

<script>
import { Icon } from 'view-design'
export default {
  name: 'Tips',
  components: { Icon }
}
</script>

<style lang="css" scoped>
.can-closed-tips {
  background: #e6f0ff;
  border: 1px solid #61a0ff;
  border-radius: 2px;
  border-radius: 2px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close-btn:hover {
  color: #367ee8;
}
.middle {
  vertical-align: middle;
}
</style>
